<template>
  <el-card class="exacard" v-model="queryFrom">
    <el-row :gutter="20" class="header_row">
      <el-col :span="20">
        <el-button type="primary" @click="handleDialogValue">添加</el-button>
      </el-col>
    </el-row>
    <div style="flex: 0.9">
      <el-table :data="tableData" stripe style="width: 100%" height="100%">
        <el-table-column :prop="item.prop" :label="item.label" v-for="(item,index) in recr_options" :key="index">
          <template v-slot="{row}" v-if="item.prop==='img'">
            <img :src="row.img" alt="" style="height: 100px"/>
          </template>
          <template v-slot="{row}" v-if="item.prop==='action'">
            <el-button size="small" type="primary" @click="handleDialogValue1(row)"><el-icon><Edit /></el-icon></el-button>
            <el-button size="small" type="danger" @click="DeleteOne(row.id)"><el-icon><Delete /></el-icon></el-button>
          </template>

        </el-table-column>
      </el-table>
    </div>
  </el-card>
  <Dialog v-model="addDialogVisible" :initGetStudents="initGetStudents"/>
  <Dialog1 v-model="updateDialogVisible" :DialogTableValue="DialogTableValue" :initGetStudents="initGetStudents"/>
</template>

<script setup>
import {ref} from "vue";
import { Search , Delete, Edit} from '@element-plus/icons-vue'
import {recr_options} from "@/views/admin/other/options";
import Dialog from '@/components/add/Arecruitment'
import Dialog1 from '@/components/update/Ureciuitment'
import {ElMessage} from "element-plus";
import {deleteRecruitment, getAllRecruitment} from "@/api/recruitment";

// 添加,修改
const addDialogVisible=ref(false)
const updateDialogVisible=ref(false)
const DialogTableValue = ref({})
// 分页器
const total=ref(0)
const queryFrom = ref({
  query:'',
  pagenum:1,
  pagesize:8,
})

const tableData = ref([])

//查询全部
const initGetStudents = async ()=>{
  await getAllRecruitment().then(res=>{
    tableData.value=res.data
  })
}
initGetStudents()

//删除
const DeleteOne = async (id) =>{
  await deleteRecruitment(id).then(res=>{
    if(res.code===20021){
      ElMessage({
        message: '删除成功',
        type: 'success',
      })
    }else {
      ElMessage({
        message: '删除失败',
        type: 'error',
      })
    }
    initGetStudents()
  })
}
//添加，修改   弹窗
const handleDialogValue=()=>{
  addDialogVisible.value=true
}
const handleDialogValue1=(row)=>{
  updateDialogVisible.value=true
  DialogTableValue.value = JSON.parse(JSON.stringify(row))
}
</script>

<style scoped>
.exacard{
  flex: 1;
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: 5px 0 5px 0;
}
.header_row{
  padding-bottom: 16px;
  box-sizing: border-box;
}
:deep(.cell){
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
:deep(.el-card__body){
  flex: 1;
  display: flex;
  overflow: hidden;
  flex-direction: column;
}
</style>